import React, {useContext, useEffect} from 'react';
import {View, Alert, ScrollView} from 'react-native';
import {useMount, useDebounceEffect, useMap, useSafeState} from 'ahooks';
import dayjs from 'dayjs';
import {useRoute} from '@react-navigation/native';
import {useSelector, useDispatch} from 'react-redux';
import {Text, Button, Input, Dialog} from '@rneui/themed';
import RNDI from 'react-native-device-info';
import GlobalContext from '@/GlobalContext';
import {ApiHost, OssHost} from '@/config/common';
import {setKeyGetAccountInfo} from '@/store';
import globalStyle from '@/style/global.less';
import style from './style.ios.less';

import {CameraRoll, useCameraRoll} from '@react-native-camera-roll/camera-roll';

export default ({children}) => {
  const {localMongoDbFileSystem} = useContext(GlobalContext);
  const dispatch = useDispatch();
  const token = useSelector(state => state.token.value);
  const accountInfo = useSelector(state => state.accountInfo.value);
  const deviceInfo = useSelector(state => state.deviceInfo.value);
  const {uniqueId} = deviceInfo || {};

  const [submitLoading, setSubmitLoading] = useSafeState(false);

  const netdiskMapArr = accountInfo?.j_ext_info?.netdisk_map_arr;
  const [netdiskMap, {set, get, setAll}] = useMap(netdiskMapArr);

  const [systemFiles = [], getSystemFiles, saveSystemFile] = useCameraRoll();
  // useDebounceEffect(() => {
  //   let arr = [];
  //   systemFiles?.edges?.forEach((item, index) => {
  //     arr.push(item.node);
  //   });
  //   console.log(arr.filter(item => item.type == 'video'));
  // }, [systemFiles]);
  useMount(() => {
    // getSystemFiles();
    (async () => {
      const res = await CameraRoll.getAlbums({});
      console.log('res', res);
    })();
    (async () => {
      let pageSize = 2;
      const {edges = [], page_info = {}} = await CameraRoll.getPhotos({
        first: 100,
        assetType: 'All',
        limited: false,
        after: 'ph://254B0F3A-1CCF-4EAC-AA7B-520AB33FDDA4/L0/001',
      });
      console.log('edges.length', edges.length);
      console.log('page_info', page_info);
    })();
  });

  return (
    <>
      <View style={style.box}>
        <View style={style.header}>
          <View style={style.searchBox}>
            <Input
              placeholder="Search"
              onChangeText={v => {
                console.log('v', v);
              }}
              maxLength={100}
              errorStyle={{
                display: 'none',
              }}
              inputContainerStyle={{
                borderBottomWidth: 0,
                backgroundColor: '#ffffff',
              }}
            />
          </View>
        </View>
        <ScrollView
          style={[
            globalStyle.boxViewBasic,
            {
              flex: 1,
            },
          ]}></ScrollView>
      </View>
    </>
  );
};
